<template>
	<div style="background-color: #FFFFFF;">
		<block v-if="themeShow == 1">
			<div class="theme-one">
				<image src="/static/img/posters.png" mode="aspectFill"></image>
				<div class="title-box">
					<div class="title-text">尖货最新ALL STAR系列</div>
					<div class="all-text">全部</div>
				</div>
				<div style="padding-left: 4.27vw;">
					<scroll-view scroll-x="true">
						<div class="flex-box">
							<div class="left-box">
								<image src="/static/img/posters.png" mode="aspectFill"></image>
								<div>
									<p class="title">C/MEO COLLECTIONNNNN</p>
									<p class="title2">Rose of No Man'ssssss</p>
									<p style="margin-top: 2.13vw;" class="li-money-font24">￥<span class="li-money-font32">431</span><label class="li-money-bbb">￥625.00</label></p>
									<p class="sale-text">
										<label class="pet-font10-time">限时秒杀</label>
										<label class="pet-font10-time left">3折</label>
									</p>
								</div>
							</div>
							<div class="right-box">
								<div class="top">
									<div v-for="item in 3">
										<image src="/static/img/posters.png" mode="aspectFill"></image>
										<div>
											<p class="title">C/MEO COLLECTIONNNNN</p>
											<p class="title2">Rose of No Man'ssssss</p>
											<p class="money">
												<span>￥431.00</span>
												<span>￥625.00</span>
											</p>
											<p class="sale-text">
												<label class="pet-font10-time">限时秒杀</label>
												<label class="pet-font10-time left">3折</label>
											</p>
										</div>
									</div>
								</div>
								<div class="bottom">
									<div v-for="item in 3">
										<image src="/static/img/posters.png" mode="aspectFill"></image>
										<div>
											<p class="title">C/MEO COLLECTIONNNNN</p>
											<p class="title2">Rose of No Man'ssssss</p>
											<p class="money">
												<span>￥431.00</span>
												<span>￥625.00</span>
											</p>
											<p class="sale-text">
												<label class="pet-font10-time">限时秒杀</label>
												<label class="pet-font10-time left">3折</label>
											</p>
										</div>
									</div>
								</div>
							</div>
							<div class="all">
								<div class="pd-50">
									<span class="all-text">查</span>
									<span class="all-text">看</span>
									<span class="all-text">所</span>
									<span class="all-text">有</span>
									<span class="all-text icon-bottom">
										<span class="iconfont icon-jinru"></span>
									</span>
								</div>
							</div>
						</div>
						
					</scroll-view>
				</div>
			</div>
		</block>
		<block v-else-if="themeShow == 2">
			<div class="theme-two">
				<div class="title-box">
					<div class="title-text">尖货最新ALL STAR系列</div>
					<div class="all-text">全部</div>
				</div>
				<div style="position: relative;">
					<image src="/static/img/posters.png" mode="aspectFill" class="bg-img"></image>
					<div style="position: relative;top: 58.93vw;">
						<scroll-view scroll-x="true">
							<div class="scroll-box">
								<div class="card-box" v-for="item in 4">
									<image src="/static/img/posters.png" mode="aspectFill"></image>
									<p class="money">
										<span>￥<label>431.00</label></span>
										<span>￥626.00</span>
									</p>
									<p>
										<span class="pet-font10-time">限时秒杀</span>
										<span class="pet-font10-time left">3折</span>
									</p>
								</div>
							</div>
						</scroll-view>
					</div>
				</div>
			</div>
		</block>
		<block v-else-if="themeShow == 3">
			<div class="theme-three">
				<image src="/static/img/posters.png" mode="aspectFill" class="three-bg"></image>
				<p class="title-three">尖货最新ALL STAR系列</p>
				<div style="position: relative;margin-top: 65.27vw;">
					<scroll-view scroll-x="true">
						<div class="scroll-box">
							<div class="card-box" v-for="item in 4">
								<image src="/static/img/posters.png" mode="aspectFill"></image>
								<p class="money">
									<span>￥<label>431.00</label></span>
									<span>￥626.00</span>
								</p>
								<p>
									<span class="pet-font10-time">限时秒杀</span>
									<span class="pet-font10-time left">3折</span>
								</p>
							</div>
						</div>
					</scroll-view>
				</div>
			</div>
		</block>
		<block v-else-if="themeShow == 4">
			<div class="newFour-box">
				<image src="/static/img/posters.png" mode="aspectFill" style="width: 100%;height: 147.2vw;position: absolute;"></image>
				<div class="big-box">
					<div class="fourTitle-box">
						<p>尖货最新</p>
						<p>ALL STAR系列</p>
					</div>
					<div class="flex-box">
						<div class="list-box" v-for="(item,index) in 4" :key="index" :class="{act:index==0}">
							<div class="left">
								<image src="/static/img/posters.png" mode="aspectFill"></image>
							</div>
							<div class="right">
								<p>￥431.00</p>
								<p>￥625.00</p>
								<p>限时秒杀</p>
								<p>3折</p>
							</div>
						</div>
						<div class="look-box">
							<p>查看全部</p>
							<span class="iconfont icon-jinru"></span>
						</div>
					</div>
			
				</div>
			</div>
		</block>
		<block v-else-if="themeShow == 5">
			<div class="theme-five">
				<div class="title-box">
					<div class="title-text">尖货最新ALL STAR系列</div>
					<div class="all-text">全部</div>
				</div>
				<image src="/static/img/posters.png" mode="aspectFill" class="five-img"></image>
				<div class="big-box" >
					<div class="cardFive-box" v-for="item in 3">
						<image src="/static/img/posters.png" mode="aspectFill"></image>
						<p class="title">C/MEO COLLEC...</p>
						<p class="text">Rose of No Man's</p>
						<p class="money">
							<span>￥431.00</span>
							<span>￥625.00</span>
						<p>
							<span class="pet-font10-time">限时秒杀</span>
							<span class="pet-font10-time left">3折</span>
						</p>
					</div>
				</div>
			</div>
		</block>
		<block v-else-if="themeShow == 6">
			<div class="theme-six">
				<div class="title-box">
					<div class="title-text">尖货最新ALL STAR系列</div>
					<div class="all-text">全部</div>
				</div>
				<div style="display: block;padding-left: 4.27vw;">
					<image src="/static/img/posters.png" mode="aspectFill" style="margin-right: 2.13vw;"></image>
					<div class="sixCard-box" v-for="item in 4">
						<image src="/static/img/posters.png" mode="aspectFill"></image>
						<p class="title">C/MEO COLLEC...</p>
						<p class="text">Rose of No Man's</p>
						<p class="money">
							<span>￥431.00</span>
							<span>￥625.00</span>
						<p>
							<span class="pet-font10-time">限时秒杀</span>
							<span class="pet-font10-time left">3折</span>
						</p>
					</div>
				</div>
			</div>
		</block>
		<block v-else-if="themeShow == 7">
			<div class="theme-serven">
				<div class="title-box">
					<div class="title-text">尖货最新ALL STAR系列</div>
					<div class="all-text">全部</div>
				</div>
				<div class="swiper-box" style="width: 91.47vw;margin-left: 4.27vw;margin-bottom: ;">
					<u-swiper :list="imgList" height="914" border-radius="16"></u-swiper>
				</div>
			</div>
		</block>
		<block v-else-if="themeShow == 8">
			<div class="newEight-box">
				<div class="title-box">
					<div class="title-text">尖货最新ALL STAR系列</div>
					<div class="all-text">全部</div>
				</div>
				<scroll-view :scroll-x="true" class="scroll-view">
					<div class="scroll">
						<div class="big-box" v-for="item in 5">
							<div class="list-box">
								<div class="list-position">
									<image src="/static/img/posters.png" mode="aspectFill" class="big-img"></image>
									<div class="pos">
										<p class="title">C/MEO COLLECTION...</p>
										<p class="text">Rose of No Man's</p>
										<p class="money">
											<span><span class="money-font">￥</span>431.00</span>
											<span>￥625.00</span>
										</p>
										<p class="flex-box">
											<span>
												<lebel class="pet-font10-time">限时秒杀</lebel>
												<lebel class="pet-font10-time left">3折</lebel>
											</span>
											<span>
												<lebel>
													<image src="" mode="aspectFill"></image>
												</lebel>
											</span>
										</p>
									</div>
								</div>
				
							</div>
						</div>
					</div>
				</scroll-view>
			</div>
		</block>
	</div>
</template>

<script>
	export default{
		props:{
			themeShow:{
				type:Number,
				default:1
			}
		},
		data(){
			return{
				imgList:['/static/img/posters.png','/static/img/posters.png','/static/img/posters.png']
			}
		}
	}
</script>

<style lang="scss">
	.pet-font10-time {
		border: 1px solid #D2AD87;
		border-radius: 0.53vw;
		padding: 0.27vw 1.07vw;
		font-size: 2.67vw;
		color: #D2AD87;
	}
	.all {
		height: 109.53vw;
		padding: 0 6.4vw;
		width: 12.8vw;
		background-color: #F8F8F8;
		border-radius: 2.13vw;
		display: flex;
		flex-direction: column;
		margin-right: 4.27vw;
		border-radius: 2.13vw;
	
		.pd-50 {
			padding-top: 40vw;
	
			.all-text {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #181818;
				font-size: 3.2vw;
				font-weight: 500;
	
				.icon-jinru {
					margin-top: 2.13vw;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #BBBBBB;
					font-size: 4vw;
					font-weight: bold;
				}
			}
		}
	}
	.left {
		margin-left: 1.07vw;
	}
	.title-box{
		padding: 6.4vw 4.27vw 4.27vw 4.27vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title-text{
			color: #232323;
			font-size: 4.27vw;
			font-weight: 300;
		}
		.all-text{
			color: #BBBBBB;
			font-size: 3.2vw;
			font-weight: 300;
		}
	}
	.title {
		font-size: 3.73vw;
		font-weight: bold;
		color: #000000;
		width: 41.6vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.title2 {
		font-size: 3.2vw;
		font-weight: Light;
		color: #000000;
		width: 29.87vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.card-box{
		padding: 2.13vw 2.13vw 2.3vw 2.13vw;
		background-color: #FFFFFF;
		border-radius: 2.13vw;
		display: inline-block;
		margin-right: 2.13vw;
		image{
			width: 32vw;
			height: 42.67vw;
		}
		.money{
			font-weight: 500;
			color: #181818;
			span:nth-child(1){
				font-size: 3.73vw;
			}
			label{
				font-size: 3.7vw;
			}
			span:nth-child(2){
				font-size: 2.67vw;
				color: #BBBBBB;
				font-weight: 300;
				text-decoration: line-through;
				margin-left: 1.07vw;
			}
		}
	}
	.theme-one{
		image{
			width: 100%;
			height: 45.6vw;
		}
		.flex-box{
			display: flex;
			padding-bottom: 6.4vw;
		}
		.left-box{
			margin-right: 2.13vw;
			image{
				width: 60vw;
				height: 86vw;
				border-radius: 2.13vw;
			}
		}
		.right-box{
			.top{
				display: flex;
				margin-bottom: 2.13vw;
			}
			.bottom{
				display: flex;
			}
			.title {
				font-size: 2.67vw;
				color: #181818;
				font-weight: bold;
				width: 24vw;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 1.07vw;
			}
			
			.title2 {
				font-size: 2.67vw;
				color: #181818;
				font-weight: Light;
				width: 24vw;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			image{
				width: 24vw;
				height: 32vw;
				border-radius: 2.13vw;
			}
			.money {
				margin-top: 1.07vw;
			
				span {
					font-size: 3.2vw;
					color: #181818;
					font-weight: 500;
					margin-right: 1.07vw;
				}
				
				span:nth-child(2){
					font-size: 2.67vw;
					font-weight: 300;
					color: #BBBBBB;
					text-decoration: line-through;
				}
				
			}
		}
	}

	.theme-two{
		height: 145vw;
		.bg-img{
			width: 91.47vw;
			height: 121.87vw;
			border-radius: 2.13vw;
			margin-left: 4.27vw;
			position: absolute;
		}
		.scroll-box{
			margin-left: 6.4vw;
			display: flex;
			image{
				width: 32vw;
				height: 42.67vw;
				border-radius: 2.13vw;
			}
		}
	}

	.theme-three{
		.title-three{
			position: relative;
			top: 6.4vw;
			left: 4.27vw;
			font-size: 4.27vw;
			font-weight: 300;
			color: #232323;
		}
		.three-bg{
			width: 100%;
			height: 133.33vw;
			position: absolute;
		}
		.scroll-box{
			display: flex;
			margin-left: 4.27vw;
		}
	}

	.newFour-box {
		color: #FFFFFF;
		// padding: 6.4vw 0vw 6.4vw 4.27vw;
		// background-image: url("/static/img/posters.png");
		background-size: cover;
		height: 147.2vw;
		position: relative;
	
		.big-box {
			display: flex;
			justify-content: space-between;
			position: relative;
			.fourTitle-box{
				margin-top: 4.2vw;
				margin-left: 4.27vw;
				font-size: 4.27vw;
				font-weight: 300;
				color: #232323;
			}
			.flex-box {
				margin-top: 4.2vw;
				.act {
					margin-top: 0 !important;
				}
	
				.list-box {
					padding: 2.13vw 4.24vw 2.13vw 2.13vw;
					background-color: #FFFFFF;
					color: #181818;
					display: flex;
					border-radius: 2.13vw;
					margin-top: 2.13vw;
	
					.left {
						image {
							width: 24vw;
							height: 24vw;
							border-radius: 2.13vw;
						}
					}
	
					.right {
						margin-left: 2.13vw;
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
	
						p:nth-child(1) {
							font-size: 3.2vw;
							font-weight: Medium;
							color: #181818;
						}
	
						p:nth-child(2) {
							font-size: 2.67vw;
							font-weight: Light;
							color: #BBBBBB;
							text-decoration: line-through;
						}
	
						p:nth-child(3) {
							margin-top: 1.07vw;
							color: #D2AD87;
							border: 1px solid #D2AD87;
							padding: 0 1.07vw 0 1.07vw;
							font-size: 2.67vw;
							font-weight: Light;
						}
	
						p:nth-child(4) {
							margin-top: 1.07vw;
							color: #D2AD87;
							border: 1px solid #D2AD87;
							padding: 0 1.07vw 0 1.07vw;
							font-size: 2.67vw;
							font-weight: Light;
							width: 4.27vw;
						}
					}
				}
	
				.look-box {
					padding: 4.27vw;
					background: #FFFFFF;
					margin-top: 2.13vw;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #181818;
					font-size: 3.2vw;
					font-weight: Medium;
					border-radius: 2.13vw;
	
					.icon-jinru {
						font-size: 4.27vw;
						color: #BBBBBB;
					}
				}
			}
	
		}
	}

	.theme-five{
		padding-bottom: 6.93vw;
		.five-img{
			width: 91.47vw;
			height: 41.6vw;
			border-radius: 2.13vw;
			margin-left: 4.27vw;
		}
		.big-box{
			display: flex;
			justify-content: space-evenly;
			image{
				width: 29.07vw;
				height: 38.67vw;
				border-radius: 2.13vw;
			}
			.cardFive-box:nth-child(2){
				margin-top: 3.73vw;
			}
			.cardFive-box{
				margin-top: 5.87vw;
				.title {
					margin-top: 1.07vw;
					font-size: 2.67vw;
					font-weight: bold;
					color: #181818;
					width: 24vw;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				.text {
					font-size: 2.67vw;
					color: #181818;
					font-weight: Light;
					width: 22vw;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				.money {
					margin-top: 1.07vw;
					font-size: 3.2vw;
					font-weight: Medium;
				
					span:nth-child(2) {
						font-size: 2.67vw;
						font-weight: Light;
						color: #BBBBBB;
						text-decoration: line-through;
					}
				}
			}
		}
	}

	.theme-six{
		image{
			width: 60.27vw;
			height: 57.87vw;
			border-radius: 2.13vw;
		}
		
		.sixCard-box{
			display: inline-block;
			margin-right: 2.13vw;
			margin-top: 2.13vw;
			image{
				width: 29.07vw;
				height: 38.67vw;
				border-radius: 2.13vw;
			}
			.title {
				margin-top: 1.07vw;
				font-size: 2.67vw;
				font-weight: bold;
				color: #181818;
				width: 24vw;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.text {
				font-size: 2.67vw;
				color: #181818;
				font-weight: Light;
				width: 22vw;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.money {
				margin-top: 1.07vw;
				font-size: 3.2vw;
				font-weight: Medium;
			
				span:nth-child(2) {
					font-size: 2.67vw;
					font-weight: Light;
					color: #BBBBBB;
					text-decoration: line-through;
				}
			}
		}
		.sixCard-box:nth-child(1){
			margin-bottom: 0vw;
		}
	}

	.theme-serven{
		.swiper-box{
			width: 91.47vw;
			margin-left: 4.27vw;
			margin-bottom: 6.4vw;
		}
	}
	.newEight-box {
		background-color: #FFFFFF;
		padding-bottom: 6.4vw;
		padding: 0vw 0 0 4.27vw;

		.text-box {
			background-color: #FFFFFF;

			.title-box {
				justify-content: space-between;
				padding-right: 4.27vw;

				.h2 {
					color: #767676;
					font-size: 3.2vw;
					margin-left: 6.93vw;
				}
			}

			.icon-jinru2 {
				width: 2.13vw;
				height: 1.99vw;
				color: #efefef;
				font-weight: bold;
				margin: 0;
				position: relative;
				top: 0.39vw;
			}
		}

		.scroll-view {
			margin: 0;

			.scroll {
				padding-left: 0;
				display: flex;

				.big-box {
					padding: 13.27vw 0;

					.list-box {
						border-radius: 2.13vw;
						// padding: 4.27vw;
						width: 59.2vw;
						height: 82.93vw;
						background-color: #efefef;
						margin-right: 2.13vw;
						position: relative;

						// 新添加的类
						.list-position {
							position: absolute;
							bottom:4.53vw;
							left: 50%;
							transform: translateX(-50%);						
						}

						.big-img {
							width: 50.67vw;
							height: 67.73vw;
							border-radius: 2.13vw;
							border: 3px solid #FFFFFF;
							// position: relative;
							// bottom: 14.73vw;
						}

						.title {
							margin-top: 1.07vw;
							font-size: 3.73vw;
							font-weight: bold;
							color: #181818;
						}

						.text {
							font-size: 3.2vw;
							color: #181818;
							font-weight: Light;
						}

						.money {
							margin-top: 1.07vw;
							font-size: 3.73vw;
							font-weight: Medium;

							.money-font {
								font-size: 3.2vw;
								color: #181818;
							}

							span:nth-child(2) {
								margin-left: 1.07vw;
								font-size: 2.67vw;
								font-weight: Light;
								color: #BBBBBB;
								text-decoration: line-through;
							}
						}
						
						.flex-box{
							display: flex;
							justify-content: space-between;
							align-items: center;
							image{
								width: 4vw;
								height: 3.5vw;
							}
						}
						
						.icon-jinru2 {
							font-size: 4.27vw;
							color: #BBBBBB;
						}

						.pos {
							// position: relative;
							// bottom: 14.73vw;
						}
					}
				}
			}
		}

	}
</style>
